<template>
  <div class="login">
    <van-icon @click="goHome" class="icon" name="arrow-left" size="20" />
    <div class="login_top">
      <h6>手机号注册</h6>
      <p>未注册手机验证后即完成注册</p>
    </div>
    <div class="login_bom">
      <p>手机号</p>
      <input
        type="text"
        v-model="text"
        @input="isRegPhone"
        placeholder="请输入手机号码"
      />
      <button @click="reqBtn" :id="active">获取验证码</button>
      <a href="#/loginpass">账号密码登录</a>
    </div>
    <footer>
      <p>
        登录即代表同意巴马旅游
        <router-link to="/agreement">用户协议</router-link>
      </p>
    </footer>
  </div>
</template>

<script setup>
import { useRouter } from "vue-router";
import { ref } from "vue";
import { showToast } from "vant";
import { reqLogin } from "@/api/login";
const router = useRouter();
let text = ref("");
let active = ref("");
const goHome = () => {
  router.push("/home");
};
const phoneReg = /^[1][3,4,5,6,7,8,9][0-9]{9}$/;
const isRegPhone = () => {
  // console.log(phoneReg.test(text.value));
  if (phoneReg.test(text.value)) {
    active.value = "active";
  } else {
    active.value = "";
  }
};
const reqBtn = async () => {
  if (phoneReg.test(text.value)) {
    const phone = text.value;
    const result = await reqLogin({ phone });
    console.log(result);
    if (result.code == 0) {
    } else {
    }
    router.push({ path: "/verification", query: { phone } });
  } else {
    showToast("请输入正确的手机号");
  }
};
</script>
<style scoped>
.login_top {
  overflow: hidden;
  width: 100%;
  height: 2.48rem;
  box-sizing: border-box;
  background-image: url(https://product-ssl-qiniu.bmtrip.com/20191125_banner.png);
  background-size: cover;
  position: relative;
  padding: 0 1rem;
}
.icon {
  position: absolute;
  top: 16px;
  left: 20px;
  z-index: 100;
}
.login_top h6 {
  font-size: 0.43rem;
  font-weight: 400;
  margin-top: 1rem;
}
.login_top p {
  font-size: 0.2rem;
  color: #666;
}
.login_bom {
  box-sizing: border-box;
  padding: 0 1rem;
  font-size: 0.3rem;
}
.login_bom p {
  margin: 0.3rem 0;
}
.login_bom input {
  width: 100%;
  border: none;
  border-bottom: 1px solid #e2e0e0;
  color: #403e3e;
  margin: 0.2rem 0;
  font-size: 0.36rem;
  height: 0.8rem;
  outline-style: none;
}
.login_bom button {
  width: 100%;
  border: none;
  background-color: #e2a0b9;
  height: 0.86rem;
  color: #fff;
  font-size: 0.3rem;
  margin: 0.3rem 0;
}
#active {
  background-color: rgb(192, 67, 116);
}
.login_bom a {
  font-size: 0.2rem;
  color: #666;
}
footer {
  position: absolute;
  bottom: 0.6rem;
  font-size: 0.28rem;
  color: #666;
  line-height: 0.6rem;
  width: 100%;
  text-align: center;
}
footer a {
  text-decoration: underline;
  color: #000;
  font-size: 0.26rem;
}
</style>
